<%--
  Created by IntelliJ IDEA.
  User: Adger
  Date: 2020/7/8
  Time: 7:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页面👍</title>
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/static/images/icon.icon" type="image/x-icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/animate/animate.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/mycss/home.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/music/APlayer.min.css">
    <link href="${pageContext.request.contextPath}/static/hover/hover-min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/alibabashiliangtu/iconfont.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/animation/animsition.min.css">
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/jquery.min3.5.js"></script>
    <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/animation/animsition.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/wow/wow.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/music/APlayer.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/myjs/myconsole.js"></script>
    <script src="${pageContext.request.contextPath}/static/myjs/home.js"></script>
    <style>
        .logo {
            font-size: 20px;
            background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-background-size: 200% 100%;
            -webkit-animation: masked-animation 1s infinite linear;
        }

        @-webkit-keyframes masked-animation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -100% 0;
            }
        }

        .navbar-brand {
            line-height: 20px;
        }

        #mySerchBlog {
            border-radius: 40px;
            font-size: 14px;
            outline: none;
            padding: 0 40px 0 20px;
            height: 30px;
            border: 1px solid #eee;
            background: #eee;
            margin-top: 4px;
            color: black;
            transition: .5s;
        }

        #mySerchBlog:focus {
            padding: 0 100px 0 20px;
        }

        .nav > li:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu li {
            height: 25px;
            line-height: 25px;
            letter-spacing: 5px;
        }

        .dropdown-menu {
            margin: 0 -10px 0;
            text-align: center;
            font-size: 14px;
            border-radius: 10px;
        }

        .navbar-fixed-top {
            z-index: 0;
        }
        /* 内容展示区域 */
        #content{
            margin-top: 73px;
        }

        @media screen and (max-width: 767px) {
            #content4 {
                display: none;
            }
        }
    </style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" style="cursor:pointer;">
                <span class="logo hvr-buzz">Adger</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="index.html" target="_blank" class="hvr-underline-from-center">首页</a>
                </li>
                <li><a href="http://wpa.qq.com/msgrd?v=3&uin=1423228256&site=qq&menu=yes" target="_blank" class="hvr-underline-from-center">技术帮助</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="navbar-brand hvr-float-shadow" href="#">
                        <img src="${pageContext.request.contextPath}/static/images/icon.jpg" alt="用户图像"
                             style="width: 30px;height: 30px;border-radius: 50%"/>
                    </a>
                    <ul class="dropdown-menu animate__animated animate__backInDown">
                        <li><a href="#" class="iconfont icon-management">我的博客</a></li>
                        <li><a href="#" class="iconfont icon-follow">我的关注</a></li>
                        <li><a href="#" class="iconfont icon-collection-b">我的收藏</a></li>
                        <li><a href="#" class="iconfont icon-gerenziliao">管理博客</a></li>
                        <li><a href="#" class="iconfont icon-bangzhu">帮助</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#" class="iconfont icon-grxx">个人信息修改</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#" class="iconfont icon-tuichu_huaban1">退出登录</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <div class="form-group">
                    <input type="text" id="mySerchBlog" placeholder="回车搜博客">
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right animsition">
                <li>
                    <a href="${pageContext.request.contextPath}/edit.jsp" target="_blank" class="animsition-link hvr-underline-from-center" data-animsition-out-class="fade-in-left-sm" data-animsition-out-duration="2000">写博客</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container" id="content">
    <div class="row">
        <div class="col-md-8">
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button" data-wow-delay="0.5s">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <h1>文章标题</h1>
                <p>文章内容</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">点击查看</a></p>
            </div>
        </div>
        <div class="col-md-4" id="content4">
            <div class="jumbotron" data-wow-delay="0.5s">
                <h4>本站一共有XXX文章</h4>
            </div>
            <div class="jumbotron" data-wow-delay="0.5s">
                <a class="btn btn-info">Java</a>
                <a class="btn btn-primary">前端</a>
                <a class="btn btn-default">分布式</a>
                <p><a class="btn btn-danger">数据结构</a></p>
            </div>
        </div>
    </div>
</div>

<div id="aplayer" class="animate__animated animate__flip"></div>
<div class="pageLoading" id="loding">
    <div class="monster">
        <div class="eye">
            <div class="eyeBall"></div>
        </div>
        <div class="mouth"></div>
    </div>
    <span class="logo">加载中....</span>
    <div class="loading">
        <div class="bar"></div>
    </div>
</div>

<div class="text-center">
    <div aria-label="Page navigation">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<footer class="text-center">
    <div>
        <p style="color: #B9B9B9;">日月盈昃，辰宿列张，寒来暑往，秋收冬藏。</p>
        <p style="color: #B9B9B9;">Copyright © 2020 Adger</p>
    </div>
</footer>

<script type="text/javascript">
    var scrolltotop = {
        setting: {startline: 100, scrollto: 0, scrollduration: 1e3, fadeduration: [500, 100]},
        controlHTML: '<img src="${pageContext.request.contextPath}/static/images/gotop.png"/>',
        controlattrs: {offsetx: 5, offsety: 5},
        anchorkeyword: "#top",
        state: {isvisible: !1, shouldvisible: !1},
        scrollup: function () {
            this.cssfixedsupport || this.$control.css({opacity: 0});
            var t = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto);
            t = "string" == typeof t && 1 == jQuery("#" + t).length ? jQuery("#" + t).offset().top : 0, this.$body.animate({scrollTop: t}, this.setting.scrollduration)
        },
        keepfixed: function () {
            var t = jQuery(window), o = t.scrollLeft() + t.width() - this.$control.width() - this.controlattrs.offsetx,
                s = t.scrollTop() + t.height() - this.$control.height() - this.controlattrs.offsety;
            this.$control.css({left: o + "px", top: s + "px"})
        },
        togglecontrol: function () {
            var t = jQuery(window).scrollTop();
            this.cssfixedsupport || this.keepfixed(), this.state.shouldvisible = t >= this.setting.startline ? !0 : !1, this.state.shouldvisible && !this.state.isvisible ? (this.$control.stop().animate({opacity: 1}, this.setting.fadeduration[0]), this.state.isvisible = !0) : 0 == this.state.shouldvisible && this.state.isvisible && (this.$control.stop().animate({opacity: 0}, this.setting.fadeduration[1]), this.state.isvisible = !1)
        },
        init: function () {
            jQuery(document).ready(function (t) {
                var o = scrolltotop, s = document.all;
                o.cssfixedsupport = !s || s && "CSS1Compat" == document.compatMode && window.XMLHttpRequest, o.$body = t(window.opera ? "CSS1Compat" == document.compatMode ? "html" : "body" : "html,body"), o.$control = t('<div id="topcontrol" class="hvr-grow-shadow">' + o.controlHTML + "</div>").css({
                    position: o.cssfixedsupport ? "fixed" : "absolute",
                    bottom: o.controlattrs.offsety,
                    right: o.controlattrs.offsetx,
                    opacity: 0,
                    cursor: "pointer"
                }).click(function () {
                    return o.scrollup(), !1
                }).appendTo("body"), document.all && !window.XMLHttpRequest && "" != o.$control.text() && o.$control.css({width: o.$control.width()}), o.togglecontrol(), t('a[href="' + o.anchorkeyword + '"]').click(function () {
                    return o.scrollup(), !1
                }), t(window).bind("scroll resize", function (t) {
                    o.togglecontrol()
                })
            })
        }
    };
    scrolltotop.init();

    $(document).ready(function() {
        $('.animsition').animsition();
    });
</script>
<script>
    /**
     * Bootstarp中导航条点击哪个就激活哪个
     */
    $(document).ready(function () {
        $('.navbar li').click(function (e) {
            $('.navbar li').removeClass('active');
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
            /* e.preventDefault();*/
        });
    });

    /**
     * 音乐播放地址 加了我自己放在阿里云OSS上面的地址 手动传的
     */
    const ap = new APlayer({
        container: document.getElementById('aplayer'),
        fixed: true,
        audio: [
            {
                name: '好心分手',
                artist: '我',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/%E7%8E%8B%E5%8A%9B%E5%AE%8F%26%E5%8D%A2%E5%B7%A7%E9%9F%B3-%E5%A5%BD%E5%BF%83%E5%88%86%E6%89%8B.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/109951164312922754.jpg'
            },
            {
                name: 'REaDAllBout',
                artist: '是',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/ReaDAllAbout.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/%E6%88%91%E7%9A%84%E5%9B%BE%E5%83%8F.jpg'
            },
            {
                name: 'YouRaiseMeUp',
                artist: '刘',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/YouRaiseMeUp.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/%E6%88%91%E7%9A%84%E6%9C%8B%E5%8F%8B.jpg'
            },
            {
                name: 'HallOfFame',
                artist: '杰',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/HallOfFame.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/%E6%9C%8B%E5%8F%8B.jpg'
            },
            {
                name: '少年',
                artist: '加',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/%E5%B0%91%E5%B9%B4.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/banner2.png'
            },
            {
                name: 'WahtAreWords',
                artist: '油',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/WahtAreWords.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/wahtAreWords.jpg'
            },
            {
                name: 'SomThingJustThis',
                artist: '吧',
                url: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/SomThingJustThis.mp3',
                cover: 'https://adger-project.oss-cn-hangzhou.aliyuncs.com/SomeThingJustThis.jpg'
            },
        ]
    });
    new WOW().init();
</script>
</body>
</html>
